import React, { useEffect } from 'react';
import { ConfigProvider, App as AntdApp, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { AppRouter } from '@/router/index';

import { useSettingsStore } from '@/store/settings';
import { useSystemTheme } from '@/hooks/useSystemTheme';
import { ErrorBoundary } from '@/components/common';
import '@/styles/index.css';

// 设置dayjs为中文
dayjs.locale('zh-cn');

/**
 * 主题配置组件
 * @description 根据用户设置提供主题配置
 */
const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { themeMode, primaryColor } = useSettingsStore(state => ({
    themeMode: state.themeMode,
    primaryColor: state.primaryColor
  }));

  // 使用系统主题监听Hook
  useSystemTheme();

  // 计算实际的主题模式
  const actualThemeMode = React.useMemo(() => {
    if (themeMode === 'auto') {
      // 如果是自动模式，检测系统主题
      if (typeof window !== 'undefined' && window.matchMedia) {
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
      }
      return 'light';
    }
    return themeMode;
  }, [themeMode]);

  // 根据主题模式配置Ant Design主题
  const themeConfig = React.useMemo(() => ({
    algorithm: actualThemeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: primaryColor,
      borderRadius: 6,
      fontSize: 14,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    },
    components: {
      Layout: {
        headerBg: actualThemeMode === 'dark' ? '#001529' : '#ffffff',
        siderBg: actualThemeMode === 'dark' ? '#001529' : '#ffffff',
        bodyBg: actualThemeMode === 'dark' ? '#141414' : '#f5f5f5'
      },
      Menu: {
        itemBg: 'transparent',
        subMenuItemBg: 'transparent'
      }
    }
  }), [actualThemeMode, primaryColor]);

  return (
    <ConfigProvider
      locale={zhCN}
      theme={themeConfig}
    >
      <AntdApp>
        {children}
      </AntdApp>
    </ConfigProvider>
  );
};

/**
 * 应用初始化组件
 * @description 处理应用启动时的初始化逻辑
 */
const AppInitializer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const initializeApp = useSettingsStore(state => state.initializeApp);
  const [isInitialized, setIsInitialized] = React.useState(false);
  const initializeRef = React.useRef(false);

  useEffect(() => {
    // 防止重复初始化
    if (initializeRef.current) {
      return;
    }
    initializeRef.current = true;

    const init = async () => {
      try {
        // 初始化应用设置
        await initializeApp();

        // 设置页面基本信息
        document.title = '课程表管理系统';

        // 设置viewport meta标签（如果不存在）
        if (!document.querySelector('meta[name="viewport"]')) {
          const viewport = document.createElement('meta');
          viewport.name = 'viewport';
          viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
          document.head.appendChild(viewport);
        }

        // 设置应用描述
        let description = document.querySelector('meta[name="description"]');
        if (!description) {
          description = document.createElement('meta');
          description.setAttribute('name', 'description');
          document.head.appendChild(description);
        }
        description.setAttribute('content', '课程表管理系统 - 支持学生管理、课程管理、课表安排和多课表混合显示的前端应用');

        // 设置关键词
        let keywords = document.querySelector('meta[name="keywords"]');
        if (!keywords) {
          keywords = document.createElement('meta');
          keywords.setAttribute('name', 'keywords');
          document.head.appendChild(keywords);
        }
        keywords.setAttribute('content', '课程表,学生管理,课程管理,教育管理,课程安排');

        setIsInitialized(true);
      } catch (error) {
        console.error('应用初始化失败:', error);
        // 即使初始化失败，也要显示应用，避免白屏
        setIsInitialized(true);
      }
    };

    init();
  }, []); // 移除 initializeApp 依赖，避免重复调用

  // 显示初始化加载状态
  if (!isInitialized) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
          <p className="text-gray-600">应用初始化中...</p>
        </div>
      </div>
    );
  }

  return <>{children}</>;
};



/**
 * 全局错误处理组件
 * @description 捕获和处理应用级别的错误
 */
const GlobalErrorHandler: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  useEffect(() => {
    // 全局错误处理
    const handleError = (event: ErrorEvent) => {
      console.error('全局错误:', {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error
      });

      // 在生产环境中，可以将错误上报到监控系统
      if (import.meta.env.PROD) {
        // 错误上报逻辑
      }
    };

    // 未处理的Promise拒绝
    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
      console.error('未处理的Promise拒绝:', event.reason);

      // 防止默认的错误处理
      event.preventDefault();
    };

    // 添加全局错误监听器
    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);

    // 清理函数
    return () => {
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
    };
  }, []);

  return (
    <ErrorBoundary>
      {children}
    </ErrorBoundary>
  );
};

/**
 * 应用根组件
 * @description 应用的根组件，集成了路由、状态管理、主题、错误处理等功能
 */
const App: React.FC = () => {
  return (
    <GlobalErrorHandler>
      <AppInitializer>
        <ThemeProvider>
          <AppRouter />
        </ThemeProvider>
      </AppInitializer>
    </GlobalErrorHandler>
  );
};

export default App;